<template>
  <view class="account-popup">
    <uv-popup ref="popupRef" round="32rpx" mode="bottom" z-index="900">
      <view class="mt-popup-body">
        <view class="mt-popup-title">
          <view class="close" @click="close">
            <image class="icon" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-close.svg"></image>
          </view>
          <view class="content">
            <slot name="title">
              <view class="default-title ellipsis">请选择提现账户</view>
            </slot>
          </view>
        </view>
        <scroll-view scroll-y="true" class="mt-popup-content">
          <uv-radio-group v-model="withdrawAccountId" placement="column" icon-placement="right" @change="handleConfirm">
            <uv-radio v-for="item in payArr" :key="item.id" :name="item.id">
              <view class="flex items-start py-24rpx">
                <image
                  v-if="item.accountType === 1"
                  class="w-48rpx h-48rpx mr-16rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pay-weixin.svg"
                ></image>
                <image
                  v-if="item.accountType === 2"
                  class="w-48rpx h-48rpx mr-16rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pay-alipay.svg"
                ></image>
                <view class="flex-1 min-w-0 text-#1C213E text-28rpx">
                  <view>{{ item.withdrawAccountName }}</view>
                  <view class="mt-24rpx">{{ item.withdrawAccount }}</view>
                </view>
              </view>
            </uv-radio>
          </uv-radio-group>
        </scroll-view>
        <view
          class="flex items-center px-32rpx py-28rpx"
          :style="{ 'border-top': payArr.length ? '2rpx solid #e6e6e6' : 'none' }"
          @click="handleAddAccount"
        >
          <image
            class="w-48rpx h-48rpx mr-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-withdr-add.svg"
          ></image>
          <view class="flex-1 min-w-0 text-#1C213E text-28rpx"> 添加账户 </view>
          <uv-icon name="arrow-right" color="#1C213E" size="28rpx"></uv-icon>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { withdrawalAccountgetWithdrawAccount } from '@/subCommission/api/index';
import { replaceMiddleWithAsterisks } from '@/utils/tools';

const emits = defineEmits(['confirm']);

const withdrawAccountId = ref('');
const popupRef = ref();

function open() {
  getData();
  popupRef.value.open();
}

function close() {
  popupRef.value.close();
}

function handleAddAccount() {
  close();
  uni.navigateTo({
    url: '/subCommission/pages/addAccount'
  });
}

const payArr = ref([]);
function getData() {
  withdrawalAccountgetWithdrawAccount({}).then((res) => {
    const arr = res.data || [];
    for (const item of arr) {
      item.withdrawAccount = replaceMiddleWithAsterisks(item.withdrawAccount);
    }
    payArr.value = arr.filter((son) => son.accountType !== 3);
  });
}

function handleConfirm(id) {
  const obj = payArr.value.find((item) => item.id === id);
  emits('confirm', obj);
  close();
}

defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.account-popup {
  .mt-popup-body {
    min-height: 200rpx;
    background-color: #ffffff;
    .mt-popup-title {
      position: relative;
      display: flex;
      align-items: center;
      height: 96rpx;
      .close {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 96rpx;
        height: 100%;
        box-sizing: border-box;
        .icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .content {
        flex: 1;
        min-width: 0;
        padding-left: 110rpx;
        padding-right: 110rpx;
        box-sizing: border-box;
        .default-title {
          font-size: 32rpx;
          text-align: center;
          font-weight: bold;
        }
      }
      .right {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 110rpx;
        height: 100%;
        padding-right: 32rpx;
        font-size: 32rpx;
        color: $mt-color-primary;
        box-sizing: border-box;
      }
    }
    .mt-popup-content {
      max-height: 500rpx;
      padding: 0 32rpx 24rpx;
      box-sizing: border-box;
    }
  }
}
</style>
